<template>
  <div class="driverInfo">
      <div>
          <div class="imgBox">
              <img src="../../assets/img/icon_default_headPic.png" alt="">
              <span>认证司机</span>
          </div>
          <div class="content">
              <div>
                  <span class="name">{{curOrder.nickname}}</span>
                  <span class="star">
                      <i class="iconfont icon-xing1" v-for="i in (curOrder.level_star*1)"></i>
                      <i class="iconfont icon-xing" v-for="j in (5-curOrder.level_star)"></i>
                  </span>
                  <span class="score">{{curOrder.level_star}}.0</span>
                  <span class="order">{{curOrder.count_finish}}单</span>
              </div>
              <span class="licence">{{curOrder.number}}</span>
              <span class="carType">{{curOrder.car_model}}</span>
          </div>
      </div>
      <div>
          <i class="iconfont icon-dianhua2"></i>
      </div>
  </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
        name:'waitDriver',
        data(){
            return{

            }
        },
        computed:{
            ...mapGetters(['curOrder'])
        },
        filters:{
            fmtNum(val){

            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../style/var.scss';
    .driverInfo{
        width:100%;
        height:280px;
        background:#fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        border-radius: 10px;
        // box-shadow: 0 0 10px 0 $font_color_sub;
        .icon-dianhua2{
            font-size: 50px;
            padding-right:30px;
            color:$font_color_sub;
        }
        >div{
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
        }
        .imgBox{
            position: relative;
            width:230px;
            padding: 0 30px;
            img{width:100%;}
            span{
                display: inline-block;
                position: absolute;
                bottom:0;
                left:50%;
                transform: translate3d(-50%,0,0);
                width:60%;
                text-align: center;
                background:$fill_green;
                border-radius: 10px;
                color:#fff;
                font-size: 10px;
            }
        }
        .content{
            display: flex;
            align-items: start;
            flex-direction: column;
            line-height: 1.8;
            .iconfont{
                font-size: 16px;

                &.icon-xing1{color:$primary;}
                &.icon-xing{
                    color:$font_color_sub;
                }
            }
            i:nth-child(4){margin-left:-11px;}
            .score{
                background:$fill_green;
                border-radius: 10px;
                color:#fff;
            }
            .order{
                color:$font_color_sub;
            }
            .licence{
                color:$font_color_sub;
            }
            .carType{
                color:$font_color_sub;
            }
        }
    }
</style>
